<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 模式选择组件 -->
<template>
    <div class="mode_container" :style="{ 'background-color': background }">
        <div class="line0" v-if="modeBtn" @click="modeClick">
            <p class="title" :class="{grayStyle: !connected, 'rtl-l text-r': $rtl}">{{$t('BDT_fascialgun_mode_select')}}</p>
            <img class="right_icon" :class="{grayStyle: !connected}" :src="rightIcon">
        </div>

        <div class="line1">
            <div
                class="mode_option"
                v-for="(item, i) in modeList" :key="i"
                @click="chooseMode(i)"
                :class="{grayStyle: !connected, 'rtl-l': $rtl}"
            >
                <img class="mode_icon"
                    :src="iconSwitch(item)">
                <p class="mode_name">{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>

<script>
// 引入vuex辅助函数，mapMutations：用于修改管理的变量，mapState：获取变量
import { mapMutations, mapState } from 'vuex';

export default {
    data(){
        return {
            background: window.isDark ? '#202224' : '#FFFFFF',
            rightIcon: window.isDark ? require('@/assets/image/dark/ic_public_right_dark.png') : require('@/assets/image/ic_public_right.svg')
        }
    },
    props: {
        modeList:{
            type: Array
        },
        modeBtn:{
            type: Boolean
        }
    },
    computed: {
        ...mapState([ 'connected', 'deviceId', 'storeModeList' ])
    },
    methods:{
        ...mapMutations([
            'chooseModeMethod'
        ]),

        modeClick(){
            if(!this.connected) return;
            this.$emit('modeClick');
        },

        //模式切换
        chooseMode(index){
            // 已连接且未选中状态
            if(!this.connected || this.storeModeList[index].modeLight) return;
            
            this.chooseModeMethod(index);
            const { deviceId, globalData, directiveData, jsInjection } = this;
            let data = '';
            switch(index){
                case 0:
                    //默认
                    data = directiveData.default_directive;
                    break;
                case 1:
                    //肩部
                    data = directiveData.shoulder_directive;
                    break;
                case 2:
                    //手臂部
                    data = directiveData.arm_directive;
                    break;
                case 3:
                    //腰部
                    data = directiveData.loin_directive;
                    break;
                case 4:
                    //臀部
                    data = directiveData.buttock_directive;
                    break;
                case 5:
                    //腿部
                    data = directiveData.leg_directive;
                    break;
                case 6:
                    //脚部
                    data = directiveData.foot_directive;
                    break;
            };
            jsInjection.writeDirective( deviceId, globalData.SERVICE_ID, globalData.CHARACTERISTIC_ID, data);
        },

        iconSwitch(data){
            return data.modeLight ?
                data.icon_on : 
                window.isDark ?
                data.icon_dark :
                data.icon
        }
    }
};
</script>

<style scoped>
    .mode_container{
        padding: .4rem 1.2rem;
        background-color: #fff;
        margin-top: 1.2rem;
        border-radius: 1.6rem;
        display: flex;
        flex-direction: column;
    }

    .line0{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 4.8rem;
        align-items: center;
    }

    .title{
        font-weight: 500;
        font-size: 1.6rem;
    }

    .right_icon{
        width: 1.2rem;
        height: 2.4rem;
    }

    .line1{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mode_option{
        width: 25%;
        height: 5.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 1.5rem 0;
    }

    .mode_icon{
        width: 4rem;
        height: 4rem;
        margin-bottom: .2rem;
    }

    .mode_name{
        font-family: HarmonyOS_Sans_SC;
        opacity: .9;
    }
</style>